@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .target-icon {
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
        transition: all 0.2s ease;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 10px;
    }
    .target-icon:hover {
        transform: translate(-50%, -50%) scale(1.3);
        z-index: 10;
    }
    .target-icon.selected {
        transform: translate(-50%, -50%) scale(1.5);
        box-shadow: 0 0 15px rgba(0,0,0,0.5);
        border: 2px solid white;
        z-index: 15;
    }
    .tracking-line {
        position: absolute;
        height: 2px;
        transform-origin: left center;
        z-index: 5;
    }
    .info-panel {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
    .axis {
        position: absolute;
        background-color: #3B82F6;
        z-index: 1;
    }
    .axis-label {
        position: absolute;
        font-size: 12px;
        font-weight: bold;
        color: #3B82F6;
        pointer-events: none;
    }
    .axis-tick {
        position: absolute;
        width: 8px;
        height: 1px;
        background-color: #9CA3AF;
        pointer-events: none;
    }
    .axis-tick-y {
        position: absolute;
        width: 1px;
        height: 8px;
        background-color: #9CA3AF;
        pointer-events: none;
    }
    .axis-tick-label {
        position: absolute;
        font-size: 10px;
        color: #6B7280;
        pointer-events: none;
    }
    .select-all-btn {
        margin-bottom: 10px;
    }
}